<template>
    <div id="CashWithdrawal">
        <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back">立即提现</div>
        <div class="cashwithdrawal box">
            <div class="cashwithdrawal_top">
                 <div class="wechat">
                    <span class="left"><img slot="label"  src="@/assets/wechat.png" width="23" height="23">&nbsp{{ nickName }}(微信)</span>
                </div> 
                <div class="border">
                    <span class="left">提现金额</span>
                    <div class="left profit">
                        <img class="left" slot="label"  src="@/assets/dollar.png" width="18" height="22">
                        <input style="font-size:.3rem;" :maxlength="maxlength" v-model="withdrawAmount" placeholder="输入申请提现金额" @input="checkNumber(withdrawAmount)">
                    </div>                  
                </div> 
                <b></b>
            </div>  
            <div class="cashwithdrawal_bottom">
                <p>账户余额 ￥{{ profit }}, <span @click="AllWithdrawals">全部提现</span></p>
            </div>
            <footer>
                <p>提现提交成功后，24小时内到账，详细进度可在奖金记录中查询；</p>
                <x-button type="primary" @click.native="request">立即提现</x-button>  
            </footer>         
        </div>
    </div>
</template>
<script>
import { XInput, XButton, Alert } from "vux";
import { getProfit, addReadyMoney, getWechatInfo } from "@/service/home.js";
import axios from "axios";
export default {
  components: { XInput, XButton, Alert },
  data() {
    return {
      token: localStorage.token,
      profit: "", // 剩余金额
      withdrawAmount: "", // 提交金额
      nickName: "",
      code: "",
      count: "",
      checkValue: "",
      maxlength: 12
    };
  },
  created() {
    this._getProfit();
  },
  mounted() {
    this.add();
  },
  methods: {
    checkNumber(withdrawAmount) {
      //限制小数点后2位数
      var index = String(withdrawAmount).indexOf(".");
      if (index != -1) {
        var arrStr = [];
        arrStr = String(withdrawAmount).split(".");
        console.log(arrStr[1].length);
        if (arrStr[1].length >= 2) {
          this.maxlength = 4;
        } else {
          this.maxlength = 12;
        }
      }
    },
    // 获取提现剩余金额
    _getProfit() {
      getProfit().then(res => {
        this.profit = res.data.profit;
        this.nickName = res.data.nickName;
      });
    },
    // 提现
    request() {
      var text = /^[1-9]\d*$/;
      if (this.withdrawAmount == "") {
        this.$vux.alert.show({
          content: "提现金额不能为空",
          hideOnBlur: true,
          maskZIndex: 100
        });
        return false;
      }

      if (
        (!text.test(this.withdrawAmount) &&
          String(this.withdrawAmount).indexOf(".") < 0) ||
        String(this.withdrawAmount).substr(0, 1) == "."
      ) {
        this.$vux.alert.show({
          content: "输入不合法",
          hideOnBlur: true,
          maskZIndex: 100
        });
        return false;
      } else if (this.withdrawAmount > this.profit) {
        this.$vux.alert.show({
          content: "剩余金额不足",
          hideOnBlur: true,
          maskZIndex: 100
        });
        return false;
      }

      var data = {
        money: this.withdrawAmount
      };
      addReadyMoney(data).then(res => {
        if (res.data.errCode == 0) {
          this.$router.push("/my/WithdrawalsRecord");
        } else {
          this.$vux.alert.show({
            content: res.data.errMsg,
            hideOnBlur: true,
            maskZIndex: 100
          });
        }
      });
    },
    //全部提现
    AllWithdrawals() {
      this.withdrawAmount = this.profit;
    },
    add() {
      this.code = this.$route.query.code;
      if (this.code == undefined) {
      } else {
        var data = {
          code: this.code
        };
        getWechatInfo(data).then(res => {});
      }
    },
    back() {
      if (sessionStorage.getItem("android") == "true") {
        window.android.goBack();
      }else if(sessionStorage.getItem("IOS")){
        returnAction();
      } else {
        this.$router.push("/my/recommend");
      }
    }
  }
};
</script>
<style scoped lang="less">
.cashwithdrawal {
  margin-top: 0.2rem;
  .cashwithdrawal_top {
    background: #fff;
    height: 170px;
    padding: 17px 15px;
    //border-bottom: 1px solid #F0F0F0;
    .wechat {
      color: #666666;
      overflow: hidden;
      margin-bottom: 20px;
      p {
        margin-left: 15px;
      }
      span {
        width: 15.2rem;
        text-align: left;
      }
    }
    .border {
      margin-bottom: 0.4rem;
      overflow: hidden;
      img {
        margin-right: 0.14rem;
      }
      span {
        width: 100%;
        line-height: 15px;
        font-size: 15px;
      }
      .profit {
        margin-top: 20px;
        .weui-cell {
          padding-left: 0;
        }
      }
    }
    b {
      width: 100%;
      height: 1px;
      background: #f0f0f0;
      display: inline-block;
    }
  }
  .cashwithdrawal_bottom {
    padding-left: 17px;
    padding-top: 16px;
    height: 45px;
    color: #666666;
    background: #fff;
    span {
      color: #8239d1;
    }
  }
  footer {
    padding: 10px 17px;
    p {
      color: #959595;
      margin-bottom: 40px;
    }
  }
}
input {
  border: 0;
  outline: medium;
}
.vux-header {
  background: #fff;
}
.vux-header-title {
  color: #000000 !important;
}
.header {
  h1 {
    color: #000000 !important;
  }
}
.weui-cell:before {
  border: none !important;
}
.weui-input {
  font-size: 15px;
}
/** 去除input输入框样式 */
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.number__input {
  border: 1px solid #ccc;
}
</style>
